<template>
  <div class="cardDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">会员卡详情</x-header>
    <div class="topHolder"></div>
    <box gap="1rem 0.8rem 0">
      <masker :opacity="0.6">
        <div class="img" :style="{backgroundImage: 'url(' + contextPath + memberCardInfo.BACBGROUNDICON + ')'}"></div>
        <div slot="content">
          <h5 class="title">{{memberCardInfo.CARDNAME}}</h5>
          <div class="cardId" v-text="'卡号：' + memberCardInfo.CARDNUMBER"></div>
          <span class="balance" v-text="'余额：¥ ' + formatCurrency(memberCardInfo.BALANCE) + '元'"></span>
          <x-button class="chargeBtn inlineBtn" v-if="false && paramType == 'cashCard'" type="default" @click.native="toCharge" :show-loading="loadingStatus" :disabled="loadingStatus" text="充值"></x-button>
        </div>
      </masker>
      <br/>
      <button-tab v-model="choosenTab">
        <button-tab-item @on-item-click="changeTab(0)">赠送详情</button-tab-item>
        <button-tab-item @on-item-click="changeTab(1)">其他详情</button-tab-item>
      </button-tab>
    </box>
    <swiper v-model="choosenTab" :show-dots="false" ref="swiperWrap">
      <swiper-item>
        <div ref="swiper1">
          <group title="首次赠送列表（办卡/充值时领取）：" v-if="memberCardInfo.GIFTMODE != 2">
            <x-table class="giftList" :cell-bordered="false">
              <thead>
              <tr style="background-color: #F7F7F7">
                <th>赠送商品</th>
                <th width="35%">赠送数量</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for='(singleItem,singleIndex) in memberCardInfo.GIFTLIST'>
                <td v-text="singleItem.GIFT_GOODNAME"></td>
                <td v-text="singleItem.GIFT_NUMS"></td>
              </tr>
              <!--<template v-for='(singleGroupItem,singleGroupIndex) in memberCardInfo.GIFTLIST'>
                <tr v-for='(singleItem,singleIndex) in singleGroupItem'>
                  <td v-text="singleItem.GIFT_GOODNAME"></td>
                  <td v-text="singleItem.GIFT_NUMS"></td>
                </tr>
              </template>-->
              <template v-if="memberCardInfo.GIFTLIST == null || memberCardInfo.GIFTLIST.length <= 0">
                <tr>
                  <td colspan="2">
                    <div class="listNoItem">本会员卡无首次赠送</div>
                  </td>
                </tr>
              </template>
              </tbody>
            </x-table>
          </group>
          <br/>
          <group title="多次赠送列表（呼叫服务员兑换）：" v-if="memberCardInfo.GIFTMODE == 1">
            <x-table class="giftList" :cell-bordered="false">
              <thead>
              <tr style="background-color: #F7F7F7">
                <th>赠送商品</th>
                <th width="35%">赠送数量</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in memberCardInfo.MUTIGIFTLIST" :key="index">
                <td v-text="item.GIFT_GOODNAME"></td>
                <td v-text="item.GIFT_NUMS"></td>
              </tr>
              <tr v-if="memberCardInfo.MUTIGIFTLIST == null || memberCardInfo.MUTIGIFTLIST.length <= 0">
                <td colspan="2">
                  <div class="listNoItem">本会员卡无多次赠送</div>
                </td>
              </tr>
              </tbody>
            </x-table>
          </group>
          <group-title class="tips" v-if="memberCardInfo.GIFTMODE == 1">
            多次赠送次数（已赠次数/总次数）：<span v-text="memberCardInfo.GIFTNUM_USED"></span>/<span v-text="memberCardInfo.GIFTNUM"></span>次；<br/>
            <span>赠送周期：从办卡/充值日期起，每周<span v-text="getCycle(memberCardInfo.GIFTCYCLE)"></span>可再次领取</span><br/>
            （注：在本次赠送商品未赠送完之前再次充值的赠送商品将再本次赠送结束后显示）
          </group-title>
          <div class="giftCode" v-if="memberCardInfo.GIFTMODE == 1">
            <span v-if="memberCardInfo.VOUCHERCODE != undefined && memberCardInfo.VOUCHERCODE != null" v-text="'赠送券码：' + memberCardInfo.VOUCHERCODE"></span>
            <span v-else style="text-align: center;">获取券码失败</span>
          </div>
          <div class="barCode" v-if="memberCardInfo.GIFTMODE == 1">
            <qrcode v-if="memberCardInfo.VOUCHERCODE != undefined && memberCardInfo.VOUCHERCODE != null" :value="memberCardInfo.VOUCHERCODE.toString()" type="img"></qrcode>
            <span v-else style="text-align: center;">获取券码失败，无法显示二维码</span>
          </div>
          <br/><br/><br/>
        </div>
      </swiper-item>
      <swiper-item>
        <div ref="swiper2">
          <group label-width="5em">
            <cell title="开卡时间：" :value="memberCardInfo.OPENCARDTIME"></cell>
          </group>
          <card :header="{title:'可用折扣的酒水列表：'}">
            <div class="card-padding discountList" slot="content">
              <span v-if="memberCardInfo.DODISCOUNT && memberCardInfo.DODISCOUNT.length > 0" v-for="(item,index) in memberCardInfo.DODISCOUNT" :key="index" >
                <span v-text="item.DISCOUNT_GOODNAME + '（折扣价：' + item.DISCOUNT_NUMS.toFixed(2) + '元）'"></span>
                <span v-if="index < (memberCardInfo.DODISCOUNT.length-1)" v-text="' / '"> </span>
              </span>
              <span v-if="!(memberCardInfo.DODISCOUNT && memberCardInfo.DODISCOUNT.length > 0)" v-text="'（此卡无可用折扣商品）'"></span>
            </div>
          </card>
          <card :header="{title:'限制购买商品：'}">
            <div class="card-padding limitList" slot="content">
              <span v-if="memberCardInfo.LIMITGOODS && memberCardInfo.LIMITGOODS.length > 0" v-for="(item,index) in memberCardInfo.LIMITGOODS" :key="index">
                <span v-text="item.LIMIT_GOODNAME"></span>
                <span v-if="index < (memberCardInfo.LIMITGOODS.length-1)" v-text="' / '"> </span>
              </span>
              <span v-if="!(memberCardInfo.LIMITGOODS && memberCardInfo.LIMITGOODS.length > 0)" v-text="'（此卡无限制购买商品）'"></span>
            </div>
          </card>
          <card :header="{title:'使用条款：'}">
            <div class="card-padding" slot="content">
              <span v-text="memberCardInfo.INSTRUCTIONS"></span>
            </div>
          </card>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
  import { Box, Group, Cell, GroupTitle, ButtonTab, ButtonTabItem, Swiper, SwiperItem, Card, Masker, Qrcode, XTable, XButton, numberComma } from 'vux'
  import {contextPath,getCardDetail} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'cardDetail',
    data(){
      return{
        contextPath:contextPath,
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:true,
        paramMemberCardUserId:this.$route.params.memberCardUserId,
        paramType:this.$route.params.type,
        memberCardInfo:{},
        choosenTab:0,
        swiperHeight:''
      }
    },
    components:{
      Box,
      Group,
      Cell,
      GroupTitle,
      ButtonTab,
      ButtonTabItem,
      Swiper,
      SwiperItem,
      Card,
      Masker,
      Qrcode,
      XTable,
      XButton
    },
    computed:{

    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      changeTab(index){
        this.choosenTab = index
      },
      toCharge(){
        this.$router.push({name:'会员卡充值',params:{memberCardUserId:this.memberCardInfo.MEMBERCARDUSER_ID,cardName:this.memberCardInfo.CARDNAME,cardNumber:this.memberCardInfo.CARDNUMBER,cardMinCharge:this.memberCardInfo.PRICE}})
      },
      getCycle(cycle){
        let cycleStr = cycle?cycle.toString():''
        let weekDay = ''
        if(cycleStr.indexOf('1') >= 0)weekDay += '/日'
        if(cycleStr.indexOf('2') >= 0)weekDay += '/一'
        if(cycleStr.indexOf('3') >= 0)weekDay += '/二'
        if(cycleStr.indexOf('4') >= 0)weekDay += '/三'
        if(cycleStr.indexOf('5') >= 0)weekDay += '/四'
        if(cycleStr.indexOf('6') >= 0)weekDay += '/五'
        if(cycleStr.indexOf('7') >= 0)weekDay += '/六'
        if(weekDay != '')weekDay = weekDay.substring(1)
        return weekDay
      },
      setSize(){
        setTimeout(()=>{
          let contentHeight = 50
          if(this.$refs.swiper1.offsetHeight > this.$refs.swiper2.offsetHeight){
            contentHeight += this.$refs.swiper1.offsetHeight
          }else{
            contentHeight += this.$refs.swiper2.offsetHeight
          }
          this.$refs.swiperWrap.$el.children[0].style.height = contentHeight + 'px'
        },100)
      }
    },
    mounted(){
      getCardDetail(this.paramMemberCardUserId).then((res)=>{
        if(res.status == 'success'){
          this.memberCardInfo = res.data
          console.log(this.memberCardInfo)
          this.loadingStatus = false
          this.setSize()
          window.onresize = ()=>{
            this.setSize()
          }
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getCardDetail error info:', res.msg)
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getCardDetail catch info:',err)})
    },
    beforeDestroy(){
      window.onresize = ()=>{}
    }
  }
</script>

<style lang="scss" scoped>
  .cardDetail{
    .vux-masker-box{
      height: 12rem;position: relative;border-radius: 0.5rem;color: #fff;
      .img {display: block;position: relative;height:100%;width: 100%;background-size: cover;background-position: center center;cursor: pointer;border-radius: 0.5rem;}
      .title{font-size: 1rem;margin: 1.2rem 0 0 1rem;width:70%;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
      .cardId{margin:0.7rem 0 0 1rem;font-size: 0.8rem;}
      .balance{font-size: 1rem;position: absolute;right: 1rem;bottom: 0.8rem;color: #fcd800;}
      .chargeBtn{position: absolute;left: 0.8rem;bottom: 0.8rem;}
    }
    .giftList tr td {font-size:0.9rem;}
    .tips{font-size: 1rem;color: red;}
    .giftCode{margin: 1rem auto;width: 250px;background: #eee;padding:1rem;text-align: center;border-radius: 0.5rem;}
    .barCode{text-align: center;}
    .discountList,.limitList{font-size: 0.85rem;}
  }
</style>
